import React, { memo, useMemo, useState } from 'react'

const MXInfo = memo((props) => {
  console.log('MXInfo Re render')
  return <h2>Name: {props.info.name} Age: {props.info.age}</h2>
})

export default function MemoHookDemo02() {
  console.log('MemoHookDemo02 Re render')
  const [show, setShow] = useState(true)

  // const info = {name: 'mx', age: 20}
  const info = useMemo(() => {
    return {name: 'mx', age: 20}
  }, [])

  return (
    <div>
      <MXInfo info={info}/>
      <button onClick={e => setShow(!show)}>Show Switch</button>
    </div>
  )
}
